<template>
  <div class="customer-buss-form-manage" v-loading="loading" element-loading-text="加载中。。。">
    <div>
      <el-card class='type-info-box-card'>
        <el-form ref='form' :model='form' size='mini' label-position='top'>
          <el-row :gutter="10">
            <el-col :md="6" :lg="4">
              <el-form-item label='六维元素名称' class='typeInfo-el-form-item' prop='PARAMDESC'>
              <el-input  v-model="form.PARAMDESC" placeholder="请输入六维元素名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop">
              <el-button type='primary' size='mini' icon='el-icon-search' @click="query">查询</el-button>
            </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop">
              <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('form')">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class='type-info-bottom'>
        <el-row :gutter="10">
         <el-col :lg='2' :md='3' v-if="btnPermission('Button_Outbound_Edit')">
            <el-button type='primary' size='mini' icon='el-icon-edit' class='b-button' :disabled="currentRow.length!=1"
            @click='DialogShow'>修改</el-button>
        </el-col>
        </el-row>
        <!-- 若要使用动态表头 建议在data中单列出table的header内容 在data中监听不到 -->
        <el-table 
          border
          ref="tableData" 
          :data='tableData' 
          header-row-class-name="tableHeaderClass"    
          @selection-change="handleCurrentChange" 
          class="tableMarginTop">
          <!-- 这里的prop按照返回的字段去更新 -->
          <el-table-column type="selection" width="40px"></el-table-column>
          <el-table-column prop='PARAMDESC'   label='六维元素名称'></el-table-column>
          <el-table-column prop='PARAMVALUE'  label='目标值'></el-table-column>
        </el-table>
        <div class="box" >
          <el-pagination background  @current-change="changePage"  :current-page="currentPage"
           :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="tableTotal">
          </el-pagination>
        </div>
      </el-card>
       <!-- 弹窗 -->
    <keep-alive>
      <component :is="dialogList.addTellerInfo" :option="dialogOptions" @refreshTable="query"></component>
    </keep-alive>
    </div>
  </div>
</template>

<script>
import query from "@/message/siteManagement/eleArrManage/query";
import toolBox from "@/common/utils/toolBox";
import getGlobalParams from "@/common/utils/getGlobalParams";
import addTellerInfo from "./dialog/addTellerInfo";
//通讯相关
import request from "@/common/utils/request";
import request1 from "@/common/utils/requestYg";

export default {
  components: {},
  data() {
    return {
      loading: false,
      currentRow: [],
      tableData: [],
      brnoList: [], //机构下拉列表
      currentPage: 1,
      tableTotal: undefined,
      // pageSize: getGlobalParams.get("PageSize"),
      pageSize:999,
      form: {
        PARAMDESC:"",
        PARAMVALUE:""
      },
      dialogList: {
        //指定被渲染组件列表
        addTellerInfo,
       
      },
      dialogOptions: {
        //新增
        isShow: false
      },
    };
  },
  created: function(){
    this.query();

  },
  methods: {
    DialogShow() {
        this.dialogOptions.isShow = true;
        this.dialogOptions.isChecked = true;
        this.dialogOptions.currentRow = this.currentRow[0];
        this.dialogOptions.title = "目标值修改";
        this.dialogOptions.log = "2"; //修改
    },
    query(val,isPage){
      if(!isPage){
        this.currentPage = 1
      }
      this.loading = true;
      let resBody = new query();
      resBody.data.PARAMDESC = this.form.PARAMDESC;
      resBody.data.oper_type = "S";
      request1(resBody)
      .then(response => {
        if(response.SYS_HEAD.ReturnCode === "000000"){
          this.tableData = response.RSP_BODY.Result;
          // this.tableTotal = response.RSP_BODY.totalnum;
          this.tableTotal = this.tableData.length
        } else {
          this.$message({
            type: "error",
            message: response.SYS_HEAD.ReturnMessage
          });
          this.tableData = [];
        }
        this.loading = false;
      })
      .catch(error => {
        this.loading = false;
      })
    },
    clearForm(item){
      this.$refs["" + item].resetFields();
    },
    changePage(val){
      this.currentPage = val;
      this.query(val,true);
    },
    handleCurrentChange(val) {
     //表格选中行改变事件设置当前行的值（currentRow）已经改变控制按钮是否可用
       this.currentRow = val;
     },
      dataFormat(row, column) {
      //格式化表格
      }
  }
};
</script>


<style lang="scss">
.type-info-bottom {
  margin-top: 10px;
}
.box {
  margin-top: 20px;
  text-align: right;
}
.el-date-editor.el-input {
  width: 100% !important;
}
.el-card {
  overflow: inherit;
}
</style>
